﻿@page "/checkboxlists"

<h3>CheckboxList 多选框组</h3>

<h4>控件用于创建多选的复选框组</h4>

<Block Title="基础用法" Introduction="通过数据绑定展现复选框组" CodeFile="checkboxlist.1.html">
    <p>使用说明：</p>
    <ul class="ul-demo">
        <li>通过 <code>bind-Value</code> 设置双向绑定数据值</li>
        <li>通过 <code>Items</code> 设置候选数据源</li>
        <li>通过 <code>ValueField</code> 设置值字段名称</li>
        <li>通过 <code>TextField</code> 设置显示字段名称</li>
        <li>通过 <code>CheckedField</code> 设置 Checkbox 状态字段 <code>bool</code> 值类型</li>
        <li>通过 <code>OnSelectedChanged</code> 回调方法获取改变项实例</li>
    </ul>
    <CheckboxList TModel="Foo" TValue="string" @bind-Value="@Value1" Items="@Items1"
                  OnSelectedChanged="@OnSelectedChanged"
                  ValueField="Value" TextField="Text" CheckedField="Checked"></CheckboxList>
    <Logger @ref="Trace" class="mt-3" />
</Block>

<Block Title="客户端验证" Introduction="内置于 ValidateForm 中使用" CodeFile="checkboxlist.2.html">
    <p>可以通过改变窗口大小，体验自适应布局</p>
    <p>本例中绑定模型 <code>FooModel</code> 的 <code>Value</code> 字段，通过勾选项自动更改模型数据</p>
    <p>由于内置于 <code>ValidateForm</code> 表单内，本例中增加了 <code>RequiredValidator</code> 必选要求验证，当取消所有选项后提示验证结果</p>
    <ValidateForm Model="@FooModel">
        <div class="form-inline">
            <div class="row">
                <div class="form-group col-12">
                    <CheckboxList TModel="Foo" TValue="string" @bind-Value="@FooModel.Value" Items="@Items2"
                                  ValueField="Value" TextField="Text" CheckedField="Checked">
                        <RequiredValidator />
                    </CheckboxList>
                </div>
            </div>
        </div>
        <div class="form-inline mt-3">
            <div class="row">
                <div class="form-group col-12">
                    <div class="control-label">绑定值：</div>
                    <div class="form-control">@FooModel.Value</div>
                </div>
            </div>
        </div>
    </ValidateForm>
</Block>

<Block Title="双向绑定集合" Introduction="绑定值为集合" CodeFile="checkboxlist.3.html">
    <p>TValue 设置为 <code>IEnumerable&lt;int&gt;</code> 泛型集合，绑定集合的 <code>ValueField</code> 指定字段必须与泛型类型一致</p>
    <CheckboxList TModel="Foo" TValue="IEnumerable<int>" Items="@Items3" @bind-Value="@Value2"
                  ValueField="Value" TextField="Text" CheckedField="Checked"></CheckboxList>
    <div class="form-inline mt-3">
        <div class="row">
            <div class="form-group col-12">
                <div class="control-label">绑定值：</div>
                <div class="form-control">@(string.Join(",", Value2))</div>
            </div>
        </div>
    </div>
    <p class="mt-3">TValue 设置为 <code>IEnumerable&lt;string&gt;</code> 泛型集合，绑定集合的 <code>ValueField</code> 指定字段更改为 <code>Text</code></p>
    <CheckboxList TModel="Foo" TValue="IEnumerable<string>" Items="@Items4" @bind-Value="@Value3"
                  ValueField="Text" TextField="Text" CheckedField="Checked"></CheckboxList>
    <div class="form-inline mt-3">
        <div class="row">
            <div class="form-group col-12">
                <div class="control-label">绑定值：</div>
                <div class="form-control">@(string.Join(",", Value3))</div>
            </div>
        </div>
    </div>
</Block>

<AttributeTable Items="@GetAttributes()" />

<EventTable Items="@GetEvents()" />
